<template>
  <div class="table-container">
    <el-table :key="tableKey" v-loading="loading" :data="tableData" style="width: 100%;" class="table"
              :row-style="rowStyle" height="100%">
      <el-table-column
        type="index"
        width="60"
        label="序号">
      </el-table-column>

      <el-table-column
        v-for="col in columnsToRender"
        :key="col.prop || col.label || col.type"
        v-bind="buildColumnProps(col)"
        :formatter="resolveFormatter(col.formatter)"
      />
    </el-table>

  </div>
</template>
<script>
export default{
  props: {
    tableKey: {
      type: String,
      default: 'table'
    },
    tableData: {
      type: Array,
      default: ()=>{
        return []
      }
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  data(){
    return {
      columnsInternal: [
        { prop: 'year', label: '会计年度', align: 'center', minWidth: 120 },
        { prop: 'profitCenter', label: '利润中心', align: 'center', minWidth: 200 },
        { prop: 'assetType', label: '资产分类', align: 'center', minWidth: 160 },
        { prop: 'value', label: '资产原值', align: 'center', minWidth: 150, formatter: 'money' }
      ]
    }
  },
  computed: {
    columnsToRender() {
      return this.columnsInternal
    }
  },
  methods: {
    rowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: rowIndex % 2 === 1 ? '#e4f4ee' : 'rgba(255, 255, 255, .1)'
      }
    },
    buildColumnProps(column) {
      return {
        prop: column.prop,
        label: column.label,
        align: column.align || 'center',
        width: column.width,
        minWidth: column.minWidth,
        fixed: column.fixed,
        showOverflowTooltip: column.showOverflowTooltip !== false
      }
    },
    resolveFormatter(formatter) {
      if (typeof formatter === 'function') return formatter
      if (typeof formatter === 'string') {
        const map = {
          date: this.formatDate,
          money: this.formatMoney,
          decimal: this.formatDecimal,
          yesno: this.formatYesNo
        }
        return map[formatter] || undefined
      }
      return undefined
    },
    // 格式化日期
    formatDate(row, column, cellValue) {
      if (!cellValue) return '-';
      const date = new Date(cellValue);
      return date.toLocaleDateString('zh-CN');
    },
    // 格式化金额
    formatMoney(row, column, cellValue) {
      if (!cellValue) return '-';
      return new Intl.NumberFormat('zh-CN').format(cellValue);
    },
    // 格式化小数
    formatDecimal(row, column, cellValue) {
      if (!cellValue) return '-';
      return Number(cellValue).toFixed(2);
    },
    // 格式化是否
    formatYesNo(row, column, cellValue) {
      if (cellValue === '1') return '是';
      if (cellValue === '0') return '否';
      return '-';
    }
  }
}
</script>
<style lang="scss" scoped>
.table-container {
  height: 100%;
  overflow: hidden;
}

// 覆盖表格默认样式
::v-deep .el-table {
  height: 100%;
}

::v-deep .el-table thead tr{
  background: #e4f4ee;
  color:#FFFFFF;
  font-size: 18px;
  font-weight: bold;
  line-height: 38px;
  border: none !important;
}
::v-deep .el-table {
  background: rgba(255, 255, 255, 0.5);

  .el-table__header-wrapper {
    background-color: transparent;
  }

  .el-table__body-wrapper {
    background-color: transparent;
  }

  .el-table__row--striped {
    background-color: transparent;
  }

  .el-table__cell {
    background-color: transparent;
  }
}

// 去除线
.table>>>.el-table__row>td {
  background: transparent;
  border: none !important;
}

/* 去掉上面的线 */
.table>>>.el-table th.is-leaf {
  border: none;
}

/* 去掉最下面的那一条线 */
.table>>>.el-table::before {
  height: 0px;
}


.excel-select_label {
  display: inline-block;
  width: 82px;
}

::v-deep .el-table::before {
  height: 0px;
}

::v-deep .el-table--small th,
.el-table--small td {
  line-height: 38px;
  font-size: 18px;
  color: #666666;
}

::v-deep .el-table th.is-leaf,
.el-table td {
  border: 0px !important;
}

::v-deep .el-table .cell {
  line-height: 38px;
}
</style>
